<template>
  <view class="goods-detail-container">
    <!-- 轮播图 -->
    <swiper indicator-dots
            autoplay
            circular>
      <swiper-item v-for="item in goodsList.pics"
                   :key="item.pics_id">
        <image :src="item.pics_big"
               @click="preview(item.pics_big)" />
      </swiper-item>
    </swiper>
    <!-- 商品详细信息 -->
    <view class="goods-info-box">
      <view class="price">￥{{goodsList.goods_price}}</view>
      <view class="goods-info-body">
        <view class="good-name">{{goodsList.goods_name}}</view>
        <view class="favi">
          <uni-icons type="star"
                     size="30"></uni-icons>
          <view>收藏</view>
        </view>
      </view>
      <view class="yf">快递：免运费</view>
    </view>
    <!-- 图文信息展示 -->
    <!-- <view v-html="goodsList.goods_introduce"></view> -->
    <!-- 因为后台接口返回回来的数据中图片与图片之间有缝隙，用户体验性不好，所以为了解决这个问题，在返回数据中 -->
    <!-- 修改img标签添加display：block属性 -->
    <rich-text :nodes="goodsList.goods_introduce"></rich-text>
    <!-- 商品导航部分 -->
    <uni-goods-nav class="goods_nav"
                   :fill="true"
                   :options="options"
                   :buttonGroup="buttonGroup"
                   @click="onClick"
                   @buttonClick="buttonClick" />
  </view>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
export default ({
  data () {
    return {
      goodsList: {},
      // 商品导航模块参数
      options: [{
        icon: 'headphones',
        text: '客服'
      }, {
        icon: 'cart',
        text: '购物车',
        info: 2//显示购物车有几件商品
      }],
      buttonGroup: [{
        text: '加入购物车',
        backgroundColor: '#ff0000',
        color: '#fff'
      },
      {
        text: '立即购买',
        backgroundColor: '#ffa200',
        color: '#fff'
      }
      ]
    };
  },
  onLoad (option) {
    this.getGoodsDetail(option.id)
    // console.log(this.$store.state.cart.car[1].good_number);
    // this.options[1].info = this.$store.state.cart.car.good_number
    console.log(this.getTotalNumber);
    this.options[1].info = this.getTotalNumber
  },
  // 使用计算属性导入vuex中getter辅助函数
  computed: {
    // 导入getters中的方法
    ...mapGetters('cart', ['getTotalNumber'])
  },
  // 使用监听的方法监听total数据是否方式改变
  // 监听不仅能监听data数据,同时还能监听computed中计算属性值
  watch: {
    getTotalNumber () {
      this.options[1].info = this.getTotalNumber
    }
  },
  methods: {
    // 导入vuex模块的setcar方法
    // 参数1为模块名，参数2为模块中mutation中映射的方法
    ...mapMutations('cart', ['setCar']),//辅助函数
    onClick (e) {
      // console.log(e);
      // console.log(e.content.text);
      if (e.content.text == '购物车') {
        uni.switchTab({
          url: '/pages/cart/index'
        })
      }
    },
    // 点击了加入购物车的按钮，把商品信息加入到vuex中
    buttonClick (e) {
      if (e.content.text == '加入购物车') {
        let { goods_id, goods_name, goods_price, goods_small_logo, good_number = 1, goods_status = true } = this.goodsList
        // 使用vuex的mutations方法
        // this.$store.commit('cart/setCar', { goods_id, goods_name, goods_price, goods_small_logo, good_number, goods_status })
        // 2、使用辅助函数使用mutation放法
        this.setCar({ goods_id, goods_name, goods_price, goods_small_logo, good_number, goods_status })
        console.log(this.$store.state.cart.car);

      }
    },
    // 获取商品详细信息
    async getGoodsDetail (id) {
      let { message, meta: { status } } = await uni.$request({
        url: 'goods/detail',
        data: {
          goods_id: id
        }
      })
      if (status == 200) {
        // replace把前面正则匹配到的的所有项替换成后面要改的区域
        message.goods_introduce = message.goods_introduce.replace(/<img/g, "<img style='display:block;'")
        this.goodsList = message
      }
    },
    // 图片预览
    preview (current) {
      // uni内置图片预览效果，参数1current为当前点击的的图片链接；参数2urls表示要预览的图片列表，可以显示当前预览图片位于列表第几
      uni.previewImage({
        current,
        urls: this.goodsList.pics.map(item => { return item.pics_big })
      })
    }
  }
})
</script>
<style lang="scss" scoped>
.goods-detail-container {
  // 给页面外层的容器，添加 50px 的内padding，
  // 防止页面内容被底部的商品导航组件遮盖
  padding-bottom: 50px;
  swiper {
    height: 750rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
  // 商品信息区域的样式
  .goods-info-box {
    padding: 10px;
    padding-right: 0;

    .price {
      color: #c00000;
      font-size: 18px;
      margin: 10px 0;
    }

    .goods-info-body {
      display: flex;
      justify-content: space-between;

      .goods-name {
        font-size: 13px;
        padding-right: 10px;
      }
      // 收藏区域
      .favi {
        width: 120px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1px solid #efefef;
        color: gray;
      }
    }

    // 运费
    .yf {
      margin: 10px 0;
      font-size: 12px;
      color: gray;
    }
  }
  .goods_nav {
    // 为商品导航组件添加固定定位
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
